<!DOCTYPE html>
<html th:fragment="layout (title, content,scriptAfterBody)" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Responsive Admin Dashboard Template">
  <meta name="keywords" content="admin,dashboard">
  <meta name="author" content="stacks">
  <!-- Styles -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,700,800&display=swap"
        rel="stylesheet">
  <link href="../plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="../plugins/font-awesome/css/all.min.css" rel="stylesheet">
  <link href="../plugins/perfectscroll/perfect-scrollbar.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/2.3.4/css/dataTables.dataTables.css" rel="stylesheet">
  <!-- Theme Styles -->
  <link href="../css/main.min.css" rel="stylesheet">
  <link href="../css/custom.css" rel="stylesheet">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING:Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <script src="../plugins/jquery/jquery-3.4.1.min.js"></script>
  <!-- 引入 flatpickr 样式和脚本 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.js"></script>
  <!-- 中文本地化（可选） -->
  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>
  <style>

        --dt-row-selected{
           background-color: #181f48!important;
           color: #fff
       }
           .register-box-container {
             width: 100%; /* 宽度自适应父容器 */
             max-width: 400px; /* 最大宽度限制，避免宽屏时过宽 */
             margin: 0 auto; /* 水平居中（冗余保障） */
           }
         .register-box-container .form-control,
       .register-box-container .form-floating {
       width: 100% !important; /* 覆盖可能的固定宽度 */
       max-width: 100% !important; /* 避免溢出 */
       box-sizing: border-box; /* 确保 padding 不撑开宽度 */
       }

           /* 仅作用于 Modal 内的卡片 body */
       .modal .card .card-body {
         padding: 25px; /* 增大内边距（比原 15px 增加 10px），给内容留足空间 */
         font-size: 15px; /* 适当增大字体，提升可读性 */
         min-width: 300px; /* 确保最小宽度，避免窄屏挤压 */
       }

       /* 调整 Modal 内表单元素的间距 */
       .modal .card .card-body .mb-3 {
         margin-bottom: 1rem !important; /* 增大表单组之间的间距 */
       }

       /* 按钮区域增加底部间距 */
       .modal .card .card-body .d-grid {
         margin-top: 1.5rem; /* 与上方表单拉开距离 */
       }

           /** 登录页面样式 */

           /* 解决溢出问题 */
       .card, .card-body {
         box-sizing: border-box !important;
         width: 100% !important;
         max-width: 100% !important;
       }

       /* 让卡片靠左 */
       .register-box-containerr .row {
         justify-content: flex-start !important;
         margin: 0 !important;
         padding: 0 !important;
       }
       .card {
         margin: 0 !important; /* 取消所有外边距，紧贴父容器左侧 */
         min-width: 280px; /* 避免过小 */
       }

       /* 优化内部间距，避免内容拥挤 */
       .card-body {
         padding: 20px !important; /* 足够的内边距 */
       }


           .table-row-selected { background-color: #e3f2fd !important; }
           .table-hover tbody tr:hover { background-color: #f1f8e9; }
           .btn-group .btn { margin-right: 8px; } /* 按钮间距 */
  </style>
</head>
<body>
<div class="page-container">
  <div class="page-header">
    <nav class="navbar navbar-expand-lg d-flex justify-content-between">
      <div class="" id="navbarNav">
        <ul class="navbar-nav" id="leftNav">
          <li class="nav-item"><a class="nav-link" id="sidebar-toggle" href="#"><i
                  data-feather="arrow-left"></i></a></li>
          <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
        </ul>
      </div>
      <div class="logo"> <a class="navbar-brand" href="index.html"></a> </div>
      <div class="" id="headerNav">
        <ul class="navbar-nav">
          <li class="nav-item dropdown"><a class="nav-link search-dropdown" href="#"
                                           id="searchDropDown" role="button"
                                           data-bs-toggle="dropdown" aria-expanded="false"><i
                  data-feather="search"></i></a>
            <div class="dropdown-menu dropdown-menu-end dropdown-lg search-drop-menu"
                 aria-labelledby="searchDropDown">
              <form>
                <input class="form-control" type="text" placeholder="Type something.."
                       aria-label="Search">
              </form>
              <h6 class="dropdown-header">Recent Searches</h6>
              <a class="dropdown-item" href="#">charts</a> <a class="dropdown-item" href="#">new
              orders</a> <a class="dropdown-item" href="#">file manager</a> <a class="dropdown-item"
                                                                               href="#">new
              users</a></div>
          </li>
          <li class="nav-item dropdown"><a class="nav-link notifications-dropdown" href="#"
                                           id="notificationsDropDown" role="button"
                                           data-bs-toggle="dropdown" aria-expanded="false">3</a>
            <div class="dropdown-menu dropdown-menu-end notif-drop-menu"
                 aria-labelledby="notificationsDropDown">
              <h6 class="dropdown-header">Notifications</h6>
              <a href="#">
                <div class="header-notif">
                  <div class="notif-image"><span class="notification-badge bg-info text-white"> <i
                          class="fas fa-bullhorn"></i> </span></div>
                  <div class="notif-text">
                    <p class="bold-notif-text">faucibus dolor in commodo lectus mattis</p>
                    <small>19:00</small></div>
                </div>
              </a> <a href="#">
              <div class="header-notif">
                <div class="notif-image"><span class="notification-badge bg-primary text-white"> <i
                        class="fas fa-bolt"></i> </span></div>
                <div class="notif-text">
                  <p class="bold-notif-text">faucibus dolor in commodo lectus mattis</p>
                  <small>18:00</small></div>
              </div>
            </a> <a href="#">
              <div class="header-notif">
                <div class="notif-image"><span class="notification-badge bg-success text-white"> <i
                        class="fas fa-at"></i> </span></div>
                <div class="notif-text">
                  <p>faucibus dolor in commodo lectus mattis</p>
                  <small>yesterday</small></div>
              </div>
            </a> <a href="#">
              <div class="header-notif">
                <div class="notif-image"><span class="notification-badge"> <img
                        src="../images/avatars/profile-image.png" alt=""> </span></div>
                <div class="notif-text">
                  <p>faucibus dolor in commodo lectus mattis</p>
                  <small>yesterday</small></div>
              </div>
            </a> <a href="#">
              <div class="header-notif">
                <div class="notif-image"><span class="notification-badge"> <img
                        src="../images/avatars/profile-image.png" alt=""> </span></div>
                <div class="notif-text">
                  <p>faucibus dolor in commodo lectus mattis</p>
                  <small>yesterday</small></div>
              </div>
            </a></div>
          </li>
          <li class="nav-item dropdown"><a class="nav-link profile-dropdown" href="#"
                                           id="profileDropDown" role="button"
                                           data-bs-toggle="dropdown" aria-expanded="false"><img
                  src="../images/avatars/profile-image.png" alt=""></a>
            <div class="dropdown-menu dropdown-menu-end profile-drop-menu"
                 aria-labelledby="profileDropDown"><a class="dropdown-item" href="#"><i
                    data-feather="user"></i>Profile</a> <a class="dropdown-item" href="#"><i
                    data-feather="inbox"></i>Messages</a> <a class="dropdown-item" href="#"><i
                    data-feather="edit"></i>Activities<span
                    class="badge rounded-pill bg-success">12</span></a> <a class="dropdown-item"
                                                                           href="#"><i
                    data-feather="check-circle"></i>Tasks</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i data-feather="settings"></i>Settings</a> <a
                      class="dropdown-item" href="#"><i data-feather="unlock"></i>Lock</a> <a
                      class="dropdown-item" href="#"><i data-feather="log-out"></i>Logout</a></div>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  <div class="page-sidebar">
    <ul class="list-unstyled accordion-menu">
      <li class="sidebar-title"> Main</li>
      <li><a href="index.html"><i data-feather="home"></i>Dashboard</a></li>

      <li class="sidebar-title"> 商家</li>
      <li><a href="email.html"><i data-feather="inbox"></i>商家管理</a></li>

      <li class="sidebar-title">权限</li>
      <li><a href="alerts.html"><i class="far fa-circle"></i>账号</a></li>
      <li><a href="typography.html"><i class="far fa-circle"></i>角色</a></li>


      <li><a href="#"><i data-feather="check-circle"></i>Documentation</a></li>
    </ul>
  </div>

  <div class="page-content">
    <div class="main-wrapper">
      <div th:replace="${content}"></div>
    </div>
  </div>


</div>
<!-- Javascripts -->

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="../plugins/perfectscroll/perfect-scrollbar.min.js"></script>
<!--<script src="../plugins/DataTables/datatables.min.js"></script>-->
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>

<script src="../js/main.min.js"></script>
<script src="../js/pages/datatables.js"></script>

<div th:replace="${scriptAfterBody}"></div>
</body>
</html>